<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
      <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div>
    </div>
    <div class="content">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
		<div id="products-list">
				<?php echo $this->getList();?>
		</div>	
		<style>
			#products-list{width:500px;max-height:300px;overflow:auto;margin:0 auto 20px;padding-bottom:10px}
		</style>
        <div class="vtabs">
          <?php $module_row = 1; ?>
          <?php foreach ($modules as $module) { ?>
          <a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>"><?php echo $entry_label . ' ' . $module_row; ?>&nbsp;<img src="view/image/delete.png" alt="" onclick="$('.vtabs a:first').trigger('click'); $('#module-<?php echo $module_row; ?>').remove(); $('#tab-module-<?php echo $module_row; ?>').remove(); return false;" /></a>
          <?php $module_row++; ?>
          <?php } ?>
          <span id="module-add"><?php echo $button_add_label; ?>&nbsp;<img src="view/image/add.png" alt="" onclick="addModule();" /></span>
		</div>
        <?php $module_row = 1; ?>
        <?php foreach ($modules as $module) { ?>
        <div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content">
          <table class="form" data-module="<?php echo $module_row; ?>">
			<tr>
              <td><?php echo $entry_product_data; ?></td>
              <td>
				<div class="scrollbox">
				<?php if(isset($module['products'])) : ?>
					<?php $class = 'odd'; ?>
					<?php foreach($module['products'] as $product) : ?>
					<?php
					$this->load->model('catalog/product');
					$product = $this->model_catalog_product->getProduct($product);
					
					?>
					<?php $class = ($class == 'even' ? 'odd' : 'even'); ?>
					<div class="<?php echo $class;?>"><?php echo $product['name'];?><img onclick="$(this).parent().remove();" src="view/image/delete.png" alt="" />
					<input type="hidden" name="treoden_productlabel[<?php echo $module_row; ?>][products][]" value="<?php echo $product['product_id'];?>"/>
					</div>
					<?php endforeach;?>
				<?php endif;?>	
				</div>
			  </td>
            </tr>
			<tr>
              <td><?php echo $entry_label; ?></td>
              <td>
				<input type="text" name="treoden_productlabel[<?php echo $module_row; ?>][label]" value="<?php echo $module['label'];?>"/>
			  </td>
            </tr>
			<tr>
              <td><?php echo $entry_bg_color; ?></td>
              <td>
				<input style="background:#<?php echo $module['bg_color'];?>"  type="text" id="bg_color-<?php echo $module_row; ?>" name="treoden_productlabel[<?php echo $module_row; ?>][bg_color]" value="<?php echo $module['bg_color'];?>"/>
				<script type="text/javascript">
					$(document).ready(function(){
						treodenSetColorPicker('#bg_color-<?php echo $module_row; ?>');
					})
				</script>				
			  </td>
            </tr>
            <tr>
              <td><?php echo $entry_status; ?></td>
              <td>
				<select name="treoden_productlabel[<?php echo $module_row; ?>][status]">
                  <?php if ($module['status']) { ?>
                  <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                  <option value="0"><?php echo $text_disabled; ?></option>
                  <?php } else { ?>
                  <option value="1"><?php echo $text_enabled; ?></option>
                  <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                  <?php } ?>
                </select>
			  </td>
            </tr>
          </table>
        </div>
        <?php $module_row++; ?>
        <?php } ?>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
function treodenSetColorPicker(obj){
	$(obj).ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		},
		onChange: function(hsb, hex, rgb, el) {
			$(obj).val(hex);
			$(obj).css('background','#' + hex);
		}
	})
}
function addProduct(obj){
	var product_id = $(obj).attr('data-id');
	var product_name = $(obj).parent().parent().children('td:first').html();
	
	$('.vtabs-content').each(function(){
		if($(this).is(':visible')){
			var check = 0;
			$(this).find('.scrollbox').find('input').each(function(){
				if($(this).val()==product_id)
				check = 1;	
			})
			if(check==0){
				var module_r = $(this).children('.form').attr('data-module');
				var html = '<div>'+product_name+'<img onclick="$(this).parent().remove();" src="view/image/delete.png" alt="" /><input name="treoden_productlabel['+module_r+'][products][]" type="hidden" value="'+product_id+'"/>';
				$(this).find('.scrollbox').append(html);
			}else{
				alert('Already exists');
			}
		}
	})
}
var module_row = <?php echo $module_row; ?>;

function addModule() {	
	html  = '<div id="tab-module-' + module_row + '" class="vtabs-content">';
	html +=	'<table class="form" data-module="'+ module_row +'">';
	html +=		'<tr>';
    html +=          '<td><?php echo $entry_product_data; ?></td>';
    html +=          '<td>';
	html +=			'<div class="scrollbox">';
	html +=			'</div>';
	html +=		  '</td>';
    html +=        '</tr>';
	html +=		'<tr>';
    html +=          '<td><?php echo $entry_label; ?></td>';
    html +=          '<td>';
	html +=			'<input type="text" name="treoden_productlabel['+ module_row +'][label]" value=""/>';
	html +=		  '</td>';
    html +=        '</tr>';
	html +=		'<tr>';
    html +=          '<td><?php echo $entry_bg_color; ?></td>';
    html +=          '<td>';
	html +=			'<input type="text" id="bg_color-'+ module_row +'" name="treoden_productlabel['+ module_row +'][bg_color]" value=""/>';
	html +=			'<script type="text/javascript">';
	html +=				'$(document).ready(function(){';
	html +=					'treodenSetColorPicker(\'#bg_color-'+ module_row +'\');';
	html +=				'})';
	html +=			'</script>';
	html +=		  '</td>';
    html +=        '</tr>';
    html +=        '<tr>';
    html +=          '<td><?php echo $entry_status; ?></td>';
    html +=         '<td>';
	html +=			'<select name="treoden_productlabel['+ module_row +'][status]">';
    html +=              '<option value="1"><?php echo $text_enabled; ?></option>';
    html +=              '<option value="0" selected="selected"><?php echo $text_disabled; ?></option>';
    html +=            '</select>';
	html +=		  '</td>';
    html +=        '</tr>';
    html +=    '</table>'; 
	html += '</div>';
	
	$('#form').append(html);
	
	$('#module-add').before('<a href="#tab-module-' + module_row + '" id="module-' + module_row + '"><?php echo $entry_label; ?> ' + module_row + '&nbsp;<img src="view/image/delete.png" alt="" onclick="$(\'.vtabs a:first\').trigger(\'click\'); $(\'#module-' + module_row + '\').remove(); $(\'#tab-module-' + module_row + '\').remove(); return false;" /></a>');
	
	$('.vtabs a').tabs();
	
	$('#module-' + module_row).trigger('click');
	
	module_row++;
}
//--></script> 
<script type="text/javascript"><!--
$('.vtabs a').tabs();
//--></script> 
<?php echo $footer; ?>